<template>
  <el-dialog width="60%" :before-close="dataFormCancle" :title="title" :close-on-click-modal="false"
    :visible.sync="visible">
    <el-card>
      <div slot="header" class="clearfix">
        <span>会员信息</span>
      </div>
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="dataForm.name" placeholder="姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-select style="width: 100%;" v-model="dataForm.sex" placeholder="性别" clearable>
                <el-option v-for="dict in dict.type.sys_user_sex" :key="(dict.value)" :label="dict.label"
                  :value="Number(dict.value)" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input type="number" v-model="dataForm.age" placeholder="年龄"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="mobile">
              <el-input v-model="dataForm.mobile" placeholder="联系电话" maxlength="11">
                <el-button slot="append" @click="searchInfo" icon="el-icon-search"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="住址" prop="location">
              <el-input type="textarea" rows="6" v-model="dataForm.location" placeholder="住址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" rows="6" v-model="dataForm.remark" placeholder="备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--< el-col :span="12">
						<el-form-item label="编号" prop="num">
							<el-input v-model="dataForm.num" placeholder="编号"></el-input>
						</el-form-item>
					</el-col> -->
        <!-- <el-col :span="12">
						<el-form-item label="创建时间" prop="createTime">
							<el-input v-model="dataForm.createTime" placeholder="创建时间"></el-input>
						</el-form-item>
					</el-col> -->

        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span>年卡信息</span>
        <el-button style="float: right; padding: 3px 8px;" type="text" @click="addCard(items.length)">添加他人</el-button>
        <el-button style="float: right; padding: 3px 0" type="text" @click="addCardOwner(items.length)">添加本人</el-button>
      </div>
      <el-row>
        <el-col span="8" v-for="(item,index) in items">
          <el-card class="member-card">
            <div slot="header" class="clearfix">
              <el-button :disabled="item.id.length" @click="minusCard(index,item)" style="float: right;" type="danger" icon="el-icon-delete"
                circle></el-button>
            </div>
            <div style="margin-top: 0px;text-align: center;cursor: pointer;" @click="takePhone(item)">
              <MemberImgVue :src="item.url" :imgWidth="'160px'" />
            </div>
            <div class="cell-item">
              <div class="cell-title required">姓名</div>
              <div class="cell-right">
                <el-input clearable class="borderless-input" v-model="item.name" placeholder="请填写姓名"></el-input>
              </div>
            </div>
            <div class="cell-item">
              <div class="cell-title required">性别</div>
              <div class="cell-right">
                <el-select class="borderless-input" style="width: 100%;" v-model="item.sex" placeholder="请选择性别"
                  clearable>
                  <el-option v-for="dict in dict.type.sys_user_sex" :key="(dict.value)" :label="dict.label"
                    :value="Number(dict.value)" />
                </el-select>
              </div>
            </div>
            <div class="cell-item">
              <div class="cell-title required">年龄</div>
              <div class="cell-right">
                <el-input type="number" clearable class="borderless-input" v-model="item.age" placeholder="请填写姓名"></el-input>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <MyCamera ref="myCamera" @unpdateAvatar="unpdateAvatar(memberInfo,$event)"></MyCamera>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dataFormCancle">取消</el-button>
      <el-button :loading="loading" type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>

</template>

<script>
  import {
    upload as uploadImage,
    getImg as getLoadImage,
    deleteById as deleteImage
  } from '@/api/file'
  // import {
  //   addOrUpdate
  // } from "@/api/business/memberinfo";
  import {
    page,getByMobile,addOrUpdate
  } from "@/api/business/memberinfo";
  // import {page,addOrUpdate as addCardUpdate  } from "@/api/business/cardinfo";
  import Photo from './photo.vue'
  import MemberImgVue from './memberImg.vue';
  import MyCamera from '@/components/Camera/index.vue'
  export default {
    dicts: ['sys_user_sex', 'sys_card_status'],
    components: {
      Photo,
      MyCamera,
      MemberImgVue
    },
    data() {
      return {
        tableShow: true,
        imageApi: process.env.VUE_APP_IMAGE_BASE_URL,
        tackPhoto: true,
        loading: false,
        memberInfo: {},
        title: '',
        visible: false,
        items: [],
        defaultImage: require('@/assets/images/error.png'),
        cardRule: {
          name: [{
            required: true,
            message: '姓名不能为空',
            trigger: 'blur'
          }],
          sex: [{
            required: true,
            message: '性别不能为空',
            trigger: 'blur'
          }],
          age: [{
            required: true,
            message: '年龄不能为空',
            trigger: 'blur'
          }],
          url: [{
            required: true,
            message: '头像不能为空',
            trigger: 'blur'
          }]
        },
        dataForm: {
          id: '',
          name: '',
          sex: 1,
          age: 1,
          location: '',
          url: '',
          remark: '',
          num: '',
          createTime: '',
          mobile: '',
          cards: []
        },
        cardList: [],
        dataRule: {
          name: [{
            required: true,
            message: '姓名不能为空',
            trigger: 'blur'
          }],
          sex: [{
            required: true,
            message: '性别不能为空',
            trigger: 'blur'
          }],
          age: [{
            required: true,
            message: '年龄不能为空',
            trigger: 'blur'
          }],
          url: [{
            required: true,
            message: '头像不能为空',
            trigger: 'blur'
          }],
          mobile: [{
            required: true,
            message: '联系电话不能为空',
            trigger: 'blur'
          }]
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          search: {
            keyword: ''
          },
        },
      }
    },
    mounted() {},
    methods: {
      unpdateAvatar(item, e) {
        item.url = e
      },
      takePhone(item) {
        this.memberInfo = item
        this.$nextTick(() => {
          this.$refs.myCamera.init()
        })
      },
      errorImg(e) {
        e.url = this.defaultImage
      },
      //按照手机号查找年卡信息
      searchInfo() {
        const mobile = this.dataForm.mobile;
	    getByMobile(mobile).then(res => {
			if (res.data) {
				// this.dataForm = res.data
				this.init(res.data)
			}
		})
      },
      //添加年卡点击事件
      addCard(index) {
        //弹出添加年卡table
        this.items.splice(index + 1, 0, {
          id: '',
          name: '',
          sex: 1,
          age: 1,
          url: '',
          beginDate: '',
          endDate: '',
          createTime: '',
          status: '',
          count: '',
          remark: '',
          num: '',
          memberId: ''
        })
      },
      addCardOwner(index) {
        //弹出添加年卡table
		console.log(this.items,'卡信息')
        let isExists = this.items.some(obj => obj.name === this.dataForm.name && obj.age===this.dataForm.age&&obj.sex===this.dataForm.sex);
		console.log(this.items,'卡信息',isExists)
        if (!isExists) {
          this.items.splice(index + 1, 0, {
            id: '',
            name: this.dataForm.name,
            sex: this.dataForm.sex,
            age: this.dataForm.age,
            url: '',
            beginDate: '',
            endDate: '',
            createTime: '',
            status: '',
            count: '',
            remark: '',
            num: '',
            memberId: ''
          })
        }
      },
      minusCard(index, item) {
        console.log(item, '');
        this.items.splice(index, 1)
        if (item.url) {
          deleteImage(item.url).then(res => {})
        }
      },
      init(record) {
        this.visible = true
        this.dataForm = record
        if (this.dataForm && this.dataForm.id) {
          this.title = '会员信息表' + '修改'
          this.items = this.dataForm.cards
        } else {
          this.title = '会员信息表' + "新增"
          this.initPage()
        }
      },
      initPage() {
        this.items = []
        this.dataForm = {
          id: '',
          name: '',
          sex: 1,
          age: 1,
          location: '',
          url: '',
          remark: '',
          num: '',
          createTime: '',
          mobile: '',
          cards: []
        }
      },
      //关闭表单
      dataFormCancle() {
        this.visible = false
        this.loading = false
        this.$emit('refreshDataList')
      },
      // 表单提交
      dataFormSubmit() {
        let tmp = false
        this.items.forEach(item => {
          if (!item.url || !item.name) {
            tmp = true
            return
          }
		  
        })
        if (tmp) {
          this.$message({
            message: '请上传年卡头像或完善年卡信息！',
            type: 'warning'
          });
          return
        }
        this.loading = true;
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.dataForm.cards = this.items
            addOrUpdate(this.dataForm).then(res => {
              this.visible = false
              this.loading = false
              this.$modal.msgSuccess(this.title + "成功");
              this.$emit('refreshDataList')
            }).catch(res => {
              let _this = this
              setTimeout(() => {
                _this.loading = false
              }, 2000)
            })
          } else {
            this.loading = false
          }
        })
      },
    },
  }
</script>
<style lang="scss">
  .required {
    position: relative;
  }

  .required::before {
    color: #ff0000;
    display: inline;
    content: '*';
    position: absolute;
    top: 0;
    right: -10px;
  }

  .card-title {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 60rpx;

  }

  .borderless-input .el-input__inner {
    border: none;
    // box-shadow: none;
    border-bottom: #252A30;
  }

  .member-card {
    display: flex;
    margin: 0 2px;
    border-radius: 10px;
    flex-direction: column;

    .el-card__header {
      border: none;
      padding: 2px 6px !important;
    }

    .cell-item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 18rpx 0rpx;

      .cell-title {
        font-size: 18px;
        color: #333a42;
        line-height: 50px;
        text-align: left;
        display: flex;
        margin-right: 20px;
      }

      .cell-right {
        line-height: 50px;
        border-bottom: 0.1mm ridge rgba(206, 220, 206, 0.6);
        display: flex;
        flex: 1
      }
    }

  }
</style>
